<template>
    <el-dialog
    v-model="dialogVisible"
    title="作品详情"
    width="75vw"
    height="100vh"
    destroy-on-close
    top="0"
  >
    <h1 id="title">{{ title }}</h1>
    <div class="info">
      <span>作者：{{ author }}</span>
      <span>所属社团：{{ clubName }}</span>
      <span>发布时间：{{ createTime }}</span>
    </div>
    <hr>
    <div v-if="type == 0" id="content" v-html="articleContent"></div>
    <video id="videoSet" v-else-if="type == 1" :src="workUrl" controls></video>
  </el-dialog>
</template>

<script setup>
import showMessageTip from '@/utils/showMessage';
import { computed, onMounted, ref,watch } from 'vue'
import api from '@/api'

const props = defineProps(['id','flag']);
const dialogVisible = ref(false)
const workId = computed(() => props.id);
const flag = computed(() => props.flag);
const title = ref('');
const author = ref('');
const createTime = ref('');
const clubName = ref('');
const type = ref(-1);
const workUrl = ref('');
const articleContent = ref('');


watch(flag,async () => {
    dialogVisible.value = true;
    getWorkContent();
})

const getWorkContent = async () => {
  title.value = '';
  author.value = '';
  createTime.value = '';
  clubName.value = '';
  type.value = -1;
  workUrl.value = '';
  articleContent.value = '';
  if(workId.value == ''){
    showMessageTip('获取文章内容失败', 'error');
    return;
  }
  const reqResult = await api.getWorksInfo({ multiMediaId:workId.value });
  if(reqResult[0] == 0){
    const data = reqResult[1].data;
    if(data.code == 1){
      type.value = data.data.type;
      title.value = data.data.title;
      author.value = data.data.userName;
      createTime.value = data.data.createTime;
      clubName.value = data.data.clubName;
      workUrl.value = data.data.multiMediaUrl;
      if(type.value == 0){
        await getArticle(workUrl.value);
      }
    }
    else{
      showMessageTip('获取文章内容失败', 'error');
      return;
    }
  }
  else{
    showMessageTip('网路请求失败', 'error');
    return;
  }
}
const getArticle = async (url) => {
  const result = await api.getArticle(url);
  if(result[0] == 0) {
    articleContent.value = result[1].data;
  }
  else{
    showMessageTip('文章内容获取失败', 'error');
    return;
  }
}
</script>

<style scoped>
#title{
  text-align: center;
  font-size: 28px;
  margin-top: 0;
  color: #191919;
}
.info{
  display: flex;
  justify-content: center;
}
.info span{
  margin-right: 25px;
  color: #8e8e8e;
}
hr{
  margin-bottom: 30px;
}
#content{
  padding: 0 10px;
}
#videoSet{
  width: 100%;;
}
</style>